<template>
    <div class="fillContain">
        <head-top></head-top>
        <el-row>
            <el-col :span="12">
                <el-form :inline="true" ref="form"  size="mini" label-width="">
                    <el-form-item label="实时数据">
                    </el-form-item>
                </el-form>
                <span style="width: 400px;margin: auto;">实时展示报表生成过程中各个阶段的数据</span>
<!--
                <div id='myChart' style="width: 400px;height: 400px;margin: auto;" v-text="datas1"></div>
-->             <div id="line" style="width: 400px;height: 400px;"></div>

            </el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light">
                <el-form :inline="true" ref="form"  size="mini" label-width="">
                    <el-form-item label="起始时间：">
                        <el-date-picker v-model="startDate" @change="getstartDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="选择开始日期" style="width: 140px"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="截至时间：">
                        <el-date-picker v-model="endDate" @change="getendDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="选择结束日期" style="width: 140px"></el-date-picker>
                    </el-form-item>
                    <el-button icon="el-icon-search" size="mini" type="primary" @click="drawLine1()">查询</el-button>
                </el-form>
                <span>综合展示报表成功与失败的数据</span>
                <div id='myChart1' style="width: 400px;height: 400px;margin: auto;position:relative;" v-text="datas"></div>
            </div></el-col>
        </el-row>
    </div>

</template>

<script>
    import {DashboardList,ErrAndSuessByTime,DashboardListForLine} from '@/api/getData'
    import HeadTop from '@/views/main-components/HeadTop.vue'
    let echarts = require('echarts/lib/echarts');
    import {setStore,getStore,removeStore} from '@/utils/storage'
    require('echarts/lib/chart/bar');
    require('echarts/lib/chart/line');
    require('echarts/lib/component/tooltip');
    require('echarts/lib/component/toolbox');
    require('echarts/lib/component/legend');
    require('echarts/lib/component/markLine');

    export default {
        name: "Dashboard",
        components: {
            HeadTop: HeadTop,
        },
        data() {
            return {
                xAxis:[],
                xAxis1:[],
                yAxis:[],
                yAxis1:[],
                startDate: '2018-01-29',
                endDate: '2018-07-29',
                datas:'',
                datas1:'',
                ooW:[],
                ooD:[],
                ooE:[],
                ooF:[]
            }

        },
        created(){
            this.timer =setInterval(this.drawLine,10000);
            this.timer2 =setInterval(this.line,10000);

        },
        mounted() {
           // this.drawLine();
            this.drawLine1();
            this.line();
            setStore("12121","就是这个样子");
        },
        beforeDestroy() {
            if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
                clearInterval(this.timer); //关闭
            }
            if(this.timer2) { //如果定时器还在运行 或者直接关闭，不用判断
                clearInterval(this.timer2); //关闭
            }
        },

        methods:{
            getstartDate(date){
                this.startDate = date;
            },
            getendDate(date){
                this.endDate = date;
            },
            /*async  drawLine(){
                // 基于准备好的dom，初始化echarts实例
                this.datas1="";
                this.xAxis=[];this.yAxis=[];
                let myChart = echarts.init(document.getElementById('myChart'));
                let reply =await DashboardList();
                if(reply.length>0)
                {
                    for (let i=0;i<reply.length;i++){
                        this.xAxis.push(reply[i].msg);
                        this.yAxis.push(reply[i].count);
                    }
                }else {
                    this.datas1="暂无数据";
                    return false;
                }
                myChart.clear();
                // 绘制图表
                var option={
                    title: {
                        text: '实时数据',
                        x:'center',
                        show : true,
                    },
                    tooltip: {
                        show: true
                    },
                    xAxis: {
                        name:'类型',
                        data: this.xAxis
                    },
                    yAxis: {
                        name:'数量',
                        minInterval: 1
                    },
                    series: [{
                        name: '',
                        type: 'bar',
                        barWidth:50,
                        data: this.yAxis
                    }]
                };
                myChart.setOption(option);
                window.addEventListener("resize", () => { myChart.resize();});
            },*/

            async  drawLine1(){
                // 基于准备好的dom，初始化echarts实例
                this.datas="";
                this.xAxis1=[];this.yAxis1=[];
                let myChart1 = echarts.init(document.getElementById('myChart1'));
                let param = new URLSearchParams();
                param.append("createtime", this.startDate);
                param.append("updatetime", this.endDate);
                let reply =await ErrAndSuessByTime(param);
                if(reply.length>0)
                {
                    for (let i=0;i<reply.length;i++){
                        this.xAxis1.push(reply[i].msg);
                        this.yAxis1.push(reply[i].count);
                    }
                }else {
                    this.datas="暂无数据";
                    return false;
                }
                myChart1.clear();
                // 绘制图表
                myChart1.setOption({
                    title: {
                        text: '综合数据'
                    },
                    tooltip: {},
                    xAxis: {
                        name:'类型',
                        data: this.xAxis1
                    },
                    yAxis: {
                        name:'数量',
                        minInterval: 1
                    },
                    series: [{
                        name: '',
                        type: 'bar',
                        barWidth:50,
                        data: this.yAxis1
                    }]
                });
                window.addEventListener("resize", () => { myChart1.resize();});
            },


              fuzhi(name,now,value){
                return {
                    name: name,
                    value: [now,value]
                }
            },
            async line(){
                let myChart1 = echarts.init(document.getElementById('line'));
                let reply=await  DashboardListForLine();
                let now = new Date();
                this.ooW.push(this.$options.methods.fuzhi('00W',now,reply.ooW));
                this.ooD.push(this.$options.methods.fuzhi('00D',now,reply.ooD));
                this.ooE.push(this.$options.methods.fuzhi('00E',now,reply.ooE));
                this.ooF.push(this.$options.methods.fuzhi('00F',now,reply.ooF));
               let option = {
                    title: {
                        text: '动态数据 + 时间坐标轴'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        name:'时间',
                        type: 'time',
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: {
                        name:'数量',
                        type: 'value',
                        boundaryGap: [0, '100%'],
                        splitLine: {
                            show: false
                        }
                    },
                    series: [
                        {name: '等待生成',
                        type: 'line',
                        showSymbol: false,
                        hoverAnimation: false,
                        data: this.ooW
                        },
                        {name: '数据生成',
                            type: 'line',
                            showSymbol: false,
                            hoverAnimation: false,
                            data: this.ooD
                        },
                        {name: '等待上传',
                            type: 'line',
                            showSymbol: false,
                            hoverAnimation: false,
                            data: this.ooE
                        },
                        {name: '文件上传',
                            type: 'line',
                            showSymbol: false,
                            hoverAnimation: false,
                            data: this.ooF
                        }
                    ]
                };
                myChart1.setOption(option);

            },


        },

    }
</script>

<style scoped>
    .main{
        position: absolute;
    }

</style>